<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>

<html>
    <head>
        <title>发布新话题</title>
        <link rel="icon" href="${pageContext.request.contextPath}/images/kaifamiao.jpg" type="image/x-icon">
        <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/kaifamiao.jpg" type="image/x-icon" media="screen">
        <%-- 链接外部样式文件(bootstrap样式) --%>
        <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.css">
        <%-- 链接外部样式文件(Simditor样式) --%>
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/simditor/styles/simditor.css" />
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/editor.css">
        <%-- 导入外部JavaScript脚本 --%>
        <script type="text/javascript" src="${pageContext.request.contextPath}/simditor/scripts/jquery.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/simditor/scripts/module.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/simditor/scripts/hotkeys.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/simditor/scripts/uploader.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/simditor/scripts/simditor.js"></script>
    </head>
    <body>

        <%-- 利用JSP标准动作实现包含操作 --%>
        <jsp:include page="/WEB-INF/pages/commons/status.jsp"></jsp:include>

        <jsp:include page="/WEB-INF/pages/commons/head.jsp"></jsp:include>

        <div class="container">
            <h4>发布话题</h4>
            <%-- @WebServlet( "/topic/publish/*" ) --%>
            <form action="/topic/publish/action" method="post">
                <div class="editor-wrapper">
                    <input type="text" name="title" placeholder="标题" autofocus>
                    <textarea name="content" placeholder="内容" id="editor"></textarea>
                </div>
                <div class="row button-wrapper">
                    <span class="col-4 offset-8" style="text-align: right ">
                        <button type="submit" class="btn btn-primary">发布</button>
                    </span>
                </div>
            </form>
        </div>

        <script type="text/javascript">
            let editor = new Simditor({
                // 指定文本域
                textarea: $('#editor') ,
                // 设置工具条中显示的按钮
                toolbar: [ 'title', 'bold', 'italic','underline','strikethrough',
                           'fontScale','color','ol','ul','blockquote','code','table','link',
                           'image','hr','indent','outdent','alignment' ] ,
                // 指定默认图片
                defaultImage: '/simditor/images/logo.png' ,
                // 配置图片上传
                upload: {
                    // 设置文件上传路径(在后端对应一个Servlet)
                    url: '/image/upload',
                    // 相当于 <input type="file" name="upFile" > 中的 name 属性
                    fileKey: 'upFile' ,
                    // 设置参数(如果没有参数要设置则可以省略或者设置为null)
                    params: null ,
                    connectionCount: 3 ,
                    leaveConfirm: 'Uploading is in progress, are you sure to leave this page?'
                }
            });
        </script>

        <jsp:include page="/WEB-INF/pages/commons/foot.jsp"></jsp:include>

    </body>
</html>
